<template>
  <div class="home">
     <el-breadcrumb separator="/" class="mianbao">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="top">
        <h1>当前时间：{{ currentDate }} {{ currentTime }}</h1>
    </div>

    <div class="main">
        <div class="mainsmall" v-for="(item,index) in tableData" :key="index">
            <p class="p1">{{item.renshu}}</p> <span class="p1">：</span> <p class="p2">{{item.shuliang}}</p>
        </div>
    </div>

    <div class="bottom">
  <el-calendar v-model="value" />
    </div>
  </div>
</template>

<script setup>
import{ref,onMounted} from 'vue'
import { Homeqiandao } from "@/api/ning/ning";
const value = ref(new Date())
var currentDate=ref('')
var currentTime=ref('')
var tableData=ref([])
onMounted(async()=>{
    var res = await Homeqiandao();
   console.log(res);
    tableData.value=res.data
    setInterval(() => {
     currentDate.value = new Date().toLocaleDateString()
     currentTime.value= new Date().toLocaleTimeString()
    }, 1000)

})
</script>

<style scoped lang="scss">
.mianbao{
    margin-bottom: 20px;
}
.home{
    width: 100%;
    .top{
        margin-bottom: 20px;
    }
    .main{
        display: flex;
        flex-wrap: wrap;
        .mainsmall{
            height: 90px;
            width: 17%;
            padding: 10px;
            background-color: white;
            border-radius: 20px;
            margin-right: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            .p1{
                font-size: 20px;
                color: #777676;
            }
            .p2{
                font-size: 40px;
                font-weight: 600;
                color: #313131;
            }
        }
    }
    .bottom{
        width: 98%;
    }
}
</style>